import { DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Form, Input, Tooltip } from 'antd';

export default function SizeInfoManager({ cols }: any) {
  return (
    <table>
      <thead>
        <Form.List name={['sizeInfo', 'columns']}>
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name }) => {
                return (
                  <th key={key}>
                    <Form.Item<any> label="" name={[name, 'title']}>
                      <Input />
                    </Form.Item>
                  </th>
                );
              })}
              <Tooltip placement="top" title="新增一列">
                <PlusCircleOutlined
                  onClick={() =>
                    add({ title: '', dataIndex: String(fields.length), key: String(fields.length) })
                  }
                />
              </Tooltip>
              <Tooltip placement="top" title="删除一列">
                <DeleteOutlined
                  className="ml-[10px]"
                  twoToneColor="red"
                  onClick={() => remove(fields.length - 1)}
                />
              </Tooltip>
            </>
          )}
        </Form.List>
      </thead>
      <Form.List name={['sizeInfo', 'dataSource']}>
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name }) => {
              return (
                <tr key={key}>
                  {cols.map((sub: any) => {
                    return (
                      <td key={sub.key}>
                        <Form.Item<any> label="" name={[name, `${String(sub.key)}`]}>
                          <Input />
                        </Form.Item>
                      </td>
                    );
                  })}
                  <Tooltip placement="top" title="删除此行">
                    <DeleteOutlined twoToneColor="red" onClick={() => remove(name)} />
                  </Tooltip>
                </tr>
              );
            })}
            <Tooltip placement="top" title="新增一行">
              <PlusCircleOutlined className="mr-[10px]" onClick={() => add()} />
            </Tooltip>
          </>
        )}
      </Form.List>
    </table>
  );
}
